<template>
  <div class="container">

    <div class="top-bar" @click.self="showChangeBgiBox">
      <div class="top-btns">
        <div class="view-left">
          <i :class="['grid', { active: typeId == 0 }]" @click="typeSwitch" data-type-id="0"></i>
          <i :class="['column', { active: typeId == 1 }]" @click="typeSwitch" data-type-id="1"></i>
        </div>
        <div class="view-right">
          <!-- <i class="setting"></i> -->
        </div>
      </div>
      <div class="edit-btn" @click="edit">
        <i class="frame"></i>
        <div class="avatar-box">
          <img class="avatar" :src="avatar" v-show="avatar" />
        </div>
      </div>
    </div>

    <div class="middle-bar">
      <ul class="tab-list">
        <li class="list-item">
          <span class="creat-albums" @click="creatAlbumSet">新建相册集</span>
        </li>
        <li class="list-item">
          <em class="name">Jeffrey</em>
        </li>
        <li class="list-item">
          <span class="creat-album" @click="creatAlbum">新建相册</span>
        </li>
      </ul>
    </div>

    <div class="switch-bar">
      <ul class="tab-list">
        <li :class="['tab-item', { active: tabId == 0 }]" @click="tabSwitch" data-tab-id="0">相册集</li>
        <li :class="['tab-item', { active: tabId == 1 }]" @click="tabSwitch" data-tab-id="1">相册</li>
      </ul>
    </div>

    <div class="main">
      <span class="noData" v-if="(!albumData && tabId==0) || (!albumSetData && tabId==1)">暂无数据</span>
      
      <div class="content">
        <album-set v-if="tabId == 0" :data="albumSetData" :type="typeId"></album-set>
        <album v-if="tabId == 1" :data="albumData" :type="typeId"></album>
      </div>
    </div>

    <bottom-bar></bottom-bar>

    <v-mask :show="isShowChangeBgiBox" @hide="hideChangeBgiBox" >
      <div class="changeBgi">
        <p>更换背景图片</p>
      </div>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import BottomBar from 'components/bottom-bar'
import VMask from 'components/v-mask'
import Album from 'pages/album/album'
import AlbumSet from 'pages/album-set/album-set'

import { domain_name } from "api/config.js";

export default {
  data() {
    return {
      isShowChangeBgiBox: false,
      avatar: '',
      albumData: 5,
      albumSetData: 6,
      typeId: '0',  //grid 0, column 1
      tabId: '1'  //相册集 0，相册 1
    }
  },
  components: {
    BottomBar,
    VMask,
    Album,
    AlbumSet
  },
  mounted() {
    let avatar = this.$store.state.userInfo.userPhoto
    this.avatar = avatar ? domain_name + avatar : ''
  },
  methods: {
    // 展示模式切换
    typeSwitch: function (e) {
      this.typeId = e.target.dataset.typeId
    },
    //更换背景图片
    showChangeBgiBox: function () {
      this.isShowChangeBgiBox = true
    },
    hideChangeBgiBox: function () {
      this.isShowChangeBgiBox = false
    },
    // 进入资料编辑页
    edit: function () {
      this.$router.push({
        path: '/edit'
      })
    },
    // 新建相册集
    creatAlbumSet: function () {
      this.$router.push({
        path: '/album-set/create'
      })
    },
    //创建相册
    creatAlbum: function () {
      this.$router.push({
        path: '/album/create'
      })
    },
    // 相册集、相册的切换
    tabSwitch: function (e) {
      this.tabId = e.target.dataset.tabId
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../common/stylus/mixin.styl'
@import '../common/stylus/variable.styl'

.container
  position fixed
  display flex
  flex-direction column
  width 100%
  height 100%
  background-color #fff
  .top-bar
    position relative
    width 100%
    height 165px
    padding 15px 0
    bg-image('../common/images/bg')
    background-size 100% 100%
    .top-btns
      display flex
      justify-content space-between
      padding 0 20px
      .view-left
        i 
          display inline-block
          width 27px
          height 27px
          background-size 27px 27px
        .grid
          bg-image('../common/images/display-grid')
          &.active
            bg-image('../common/images/display-grid-active')
        .column
          bg-image('../common/images/display-column')
          &.active
            bg-image('../common/images/display-column-active')
      .view-right
        .setting
          display block
          width 34px
          height 34px
          bg-image('../common/images/setting')
          background-size 27px 27px
    .edit-btn
      position absolute
      left 50%
      transform translateX(-50%)
      bottom -25px
      i 
        display block
      .frame
        width 90px
        height 90px
        bg-image('../common/images/frame')
        background-size 90px 90px
      .avatar-box  
        position absolute
        width 65px
        height 65px
        top 50%
        left 50%
        transform translate3d(-50%, -50%, 0)
        background-color #fff
        .avatar
          width 65px
          height 65px
  .middle-bar
    display flex  
    width 100%
    height 50px
    bg-image('../common/images/bar-bg')
    background-size 100% 100%
    .tab-list
      display flex
      width 100%
      .list-item
        flex 1
        line-height 50px
        text-align center
        span 
          display inline-block
          width 100px
          height 34px
          line-height 34px
          margin auto
          bg-image('../common/images/creat-btn-bg')
          background-size 100% 100%
          color #fefefe
          font-size $font-size-medium
        em
          display block
          margin-top 10px
          font-size $font-size-small
          color #fefefe
  .switch-bar
    .tab-list
      display flex
      height 40px
      .tab-item
        flex 1
        height 40px
        line-height 40px
        text-align center
        color #666666
        font-size $font-size-small
        box-sizing border-box
        border-bottom 1px solid rgba(0, 0, 0, .1)
        &:last-child
          position relative
          &:before
            position absolute
            top 20%
            left 0
            content ''
            width 1px
            height 60%
            background-color rgba(0, 0, 0, .1)
        &.active
          position relative
          color $color-theme
          &:after
            position absolute
            bottom -1px
            left 25%
            content ''
            width 50%
            height 2px
            background-color $color-theme
  .main
    position relative
    display flex
    flex-direction column
    flex 1  
    overflow-y scroll 
    .noData
      position absolute
      top 50%
      transform translateY(-100%)
      left 50%
      transform translate3d(-50%, -200%, 0)
      color #cccccc
      font-size $font-size-large
    .content
      flex 1
      padding-bottom 60px      
  .changeBgi
    position absolute
    top 50% 
    left 50%
    transform translate3d(-50%, -50%, 0)
    z-index 100
    width 70%
    background-color #fff
    border-radius 2px
    font-size $font-size-medium
    p
      height 35px
      padding 0 10px
      line-height 35px

</style>
